<template>
  <div style='padding:18px 0px'>
    <el-row :gutter="24">
      <el-col :span="4" :offset='1'>
        <el-input v-model="pageData.searchtext" autocomplete="off" />
      </el-col>
      <el-col :span="1">
        <el-button type="success" @click='handlerSearch'>查询</el-button>
      </el-col>
      <el-col :span="1">
        <el-button type="success" @click='addDialogVisible=true'>新增</el-button>
      </el-col>

    </el-row>
  </div>
  <el-table :data="pageData.records" style="width: 100%">
    <el-table-column label="Date" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-icon><timer /></el-icon>
          <span style="margin-left: 10px">{{ scope.row.date }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="Name" width="180">
      <template #default="scope">
        <el-popover effect="light" trigger="hover" placement="top" width="auto">
          <template #default>
            <div>username: {{ scope.row.username }}</div>
            <div>address: {{ scope.row.address }}</div>
          </template>
          <template #reference>
            <el-tag>{{ scope.row.username }}</el-tag>
          </template>
        </el-popover>
      </template>
    </el-table-column>

    <el-table-column label="Phone" width="180">
      <template #default="scope">
        <el-popover effect="light" trigger="hover" placement="top" width="auto">
          <template #default>
            <div>name: {{ scope.row.phone }}</div>
            <div>address: {{ scope.row.address }}</div>
          </template>
          <template #reference>
            <el-tag>{{ scope.row.phone }}</el-tag>
          </template>
        </el-popover>
      </template>
    </el-table-column>

    <el-table-column label="Password" width="280">
      <template #default="scope">
        <el-popover effect="light" trigger="hover" placement="top" width="auto">
          <template #default>
            <div>name: {{ scope.row.password }}</div>
            <div>address: {{ scope.row.address }}</div>
          </template>
          <template #reference>
            <el-tag>{{ scope.row.password }}</el-tag>
          </template>
        </el-popover>
      </template>
    </el-table-column>

    <el-table-column label="Operations">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
          编辑
        </el-button>
        <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
        >
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>

  <div class="demo-pagination-block">
    <div class="demonstration">All combined</div>
    <el-pagination
        v-model:current-page="pageData.corrent"
        v-model:page-size="pageData.size"
        :page-sizes="[10, 20, 30, 40]"
        :size="pageData.size"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageData.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>
  <!--删除对话框-->
  <el-dialog
      v-model="deleteDialogVisible"
      title="提示"
      width="500"
      :before-close="handleClose"
  >
    <span>确认要删除这个数据吗?</span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="deleteDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmDelete">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
  <!--新增对话框-->
  <el-dialog v-model="addDialogVisible" title="新增" width="500">
    <el-form :model="addObj">
      <el-form-item label="姓名" :label-width="formLabelWidth">
        <el-input v-model="addObj.username" autocomplete="off" />
      </el-form-item>
      <el-form-item label="手机" :label-width="formLabelWidth">
        <el-input v-model="addObj.phone" autocomplete="off" />
      </el-form-item>
      <el-form-item label="密码" :label-width="formLabelWidth">
        <el-input v-model="addObj.password" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handlerAddCancel = false">取消</el-button>
        <el-button type="primary" @click="handlerAdd">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
  <!--编辑对话框-->
  <el-dialog v-model="editDialogVisible" title="编辑" width="500">
    <el-form :model="editObj">
      <el-form-item label="姓名" :label-width="formLabelWidth">
        <el-input v-model="editObj.username" autocomplete="off" />
      </el-form-item>
      <el-form-item label="手机" :label-width="formLabelWidth">
        <el-input v-model="editObj.phone" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handlerEditCancel=false">取消</el-button>
        <el-button type="primary" @click="handlerEditCommit">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>

import {ref,onMounted} from "vue";
import api from '../api'
import lodash from'lodash'
//绑定两个数据
const pageData=ref({
  records:[],
  total:0,
  size:10,
  corrent:1,
  page:1,
  searchtext:''
});

const handlerSearch=()=>{
  pageData.value.corrent=1;
  getTableList();
}

const deleteDialogVisible=ref(false);

const deleteObj=ref({
  id:'',
  index:-1
});
const addDialogVisible=ref(false);
const addObj=ref({
  username:'',
  phone:'',
  password:''
});
const editDialogVisible=ref(false);
const editObj=ref({
  id:'',
  username:'',
  phone:'',
  password:''
});

//挂载之后执行的钩子函数
onMounted( function (){
  //获取表格数据。
  getTableList();
});

const getTableList=async ()=>{
  const page={
    current:pageData.value.corrent,
    size:pageData.value.size,
    searchtext:pageData.value.searchtext
  };
  if(pageData.value.searchtext){
    page.searchtext=pageData.value.searchtext;
  }
  const result=await api.getAdminPage(page);

  pageData.value=result;
  pageData.value.searchtext=page.searchtext;
}

const handleEdit = (index, row) => {
  //打开对话框
  editDialogVisible.value=true;

  //绑定数据
  editObj.value=lodash.clone(row);

}

const handlerEditCancel=()=>{
  editDialogVisible.value=false;
}
const handlerEditCommit=async ()=>{
  await api.editAdmin(editObj.value);
  getTableList();
  editDialogVisible.value=false;
}
const handleDelete = async (index, row) => {
  deleteObj.value.id=row.id;
  deleteObj.value.index=index;
  deleteDialogVisible.value=true;
}
const confirmDelete=async ()=>{
  await api.deleteAdmin(deleteObj.value.id);
  // pageData.value.records.splice(deleteObj.value.index,1);
  getTableList();
  deleteDialogVisible.value=false;
}
const handlerAddCancel=()=>{
  addObj.value.username="";
  addObj.value.phone="";
  addDialogVisible.value=false;
}
const handlerAdd=async ()=>{
  await api.addAdmin(addObj.value);
  getTableList();
  addDialogVisible.value=false;
}

//改变分页行数
const handleSizeChange = (val) => {

  pageData.value.size = val;
  getTableList();
}
//改变当前页码的方法
const handleCurrentChange = (val) => {

  pageData.value.corrent = val;
  getTableList();

}

</script>
